<script>
export default {
  name: "FormCreator",
  props: {
    // 表单结构树
    conf: {
      type: Object,
      required: true,
    },
  },
  methods: {
    // 渲染行
    renderRows(items) {
      return items.map((cols) => {
        return <el-row> {this.renderCols(cols)} </el-row>;
      });
    },
    // 渲染列
    renderCols(cols) {
      return cols.map((column) => {
        return (
          <el-col span={column.col}>
            <el-form-item label={column.label} prop={column.key}>
              {this.renderItem(column)}
            </el-form-item>
          </el-col>
        );
      });
    },
    renderItem(item) {
      switch (item.type) {
        case "input":
          return <el-input v-model={item.value}></el-input>;
        case "select":
          return (
            <el-select v-model={item.value}>
              {item.options.map((option) => {
                return (
                  <el-option
                    value={option.value}
                    label={option.label}
                  ></el-option>
                );
              })}
            </el-select>
          );
      }
    },
  },
  render() {
    console.log(this.conf);
    const { title, items, form, rules } = this.conf;
    return (
      <div>
        {title && <h2>{title}</h2>}
        {title && <h r />}
        <el-form labelWidth="80px" props={{ model: form }} rules={rules}>
          {this.renderRows(items)}
        </el-form>
      </div>
    );
  },
};
</script>